<template>
	<div class="SHZY-common-layout">
		<div class="SHZY-common-layout-center">
			<el-row class="SHZY-common-search-box" :gutter="16">
				<el-form @submit.native.prevent="">
					<el-col :span="6">
						<el-form-item label="检验批号">
							<el-input v-model="query.code" placeholder="检验批号" @keyup.enter.native="search" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="物料">
							<el-input v-model="query.material" placeholder="物料" @keyup.enter.native="search" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="生产订单号">
							<el-input v-model="query.orderNo" placeholder="生产订单号" @keyup.enter.native="search" clearable />
						</el-form-item>
					</el-col>
					<template v-if="showAll">
						<el-col :span="6">
							<el-form-item label="检验员">
								<el-input v-model="query.employeeCode" placeholder="检验员" @keyup.enter.native="search"
									clearable />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="处理状态">
								<el-select v-model='query.status' placeholder='状态' clearable>
									<el-option v-for="(item, index) in statusData" :key="index" :label="item.fullName"
										:value="item.enCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
							<el-button type="text" icon="el-icon-arrow-down" @click="showAll = true"
								v-if="!showAll">展开</el-button>
							<el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="SHZY-common-layout-main SHZY-flex-main">
				<div class="SHZY-common-head">
					<div>
					</div>
					<div class="SHZY-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh SHZY-common-head-icon" :underline="false"
								@click="reset()" />
						</el-tooltip>
					</div>
				</div>
				<SHZY-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" custom-column>
					<el-table-column prop="overdue" label="标记" width="70" align="center">
						<template slot="header" slot-scope="scope">
							<el-dropdown>
								<span class="el-dropdown-link">标记 <i class="el-icon-question"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="right"><i class="ym-custom ym-custom-checkbox-blank-circle"
											style="color:#ff625c;font-size:14px;">逾期 </i></el-dropdown-item>
									<el-dropdown-item command="bottom"><i class="ym-custom ym-custom-checkbox-blank-circle"
											style="color:#f9a646;font-size:14px;">即将逾期 </i></el-dropdown-item>
									<el-dropdown-item command="refresh"><i class="ym-custom ym-custom-checkbox-blank-circle"
											style="color:#6dcc51;font-size:14px;">正常</i></el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
						<template slot-scope="scope">
							<i class="ym-custom ym-custom-checkbox-blank-circle" style="color:#ff625c;font-size:16px;"
								v-if="scope.row.overdue == 2"></i>
							<i class="ym-custom ym-custom-checkbox-blank-circle" style="color:#f9a646;font-size:16px;"
								v-else-if="scope.row.overdue == 1"></i>
							<i class="ym-custom ym-custom-checkbox-blank-circle" style="color:#6dcc51;font-size:16px;"
								v-else></i>
						</template>
					</el-table-column>
					<el-table-column label="检验批号" prop="code" width="150" align="left">
					</el-table-column>
					<el-table-column label="检验日期" prop="date" width="150" align="left" :formatter="shzy.tableDateFormat">
					</el-table-column>
					<el-table-column label="报检类型" prop="type" width="100" align="left">
					</el-table-column>
					<el-table-column label="检验类型" prop="inspectType" width="100" align="left">
						<template slot-scope="scope">
							{{ getIpqcInspectTypeDes(scope.row.inspectType) }}
						</template>
					</el-table-column>
					<el-table-column label="处理状态" prop="status" width="100" align="left">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.status == 0" type="info">未检验</el-tag>
							<el-tag v-if="scope.row.status == 1">检验中</el-tag>
							<el-tag v-if="scope.row.status == 2" type="success">已检验</el-tag>
							<el-tag v-if="scope.row.status == 3" type="warning">已过帐</el-tag>
							<el-tag v-if="scope.row.status == 4" type="warning">已关闭</el-tag>
							<template v-if="scope.row.status == 4">
								<el-tooltip effect="dark" :content="scope.row.closeDes" placement="top">
									<i class="el-icon-question" style="margin-left: 5px;"></i>
								</el-tooltip>
							</template>
						</template>
					</el-table-column>
					<el-table-column label="检验结果" prop="judgeStatus" width="100" align="left">
						<template slot-scope="scope">
							<el-tag v-if="(scope.row.status == 2 || scope.row.status == 3) && scope.row.judgeStatus == 'OK'"
								type="success">合格</el-tag>
							<el-tag v-if="(scope.row.status == 2 || scope.row.status == 3) && scope.row.judgeStatus == 'NG'"
								type="danger">不合格</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="物料名称" prop="materialDes" min-width="150" :show-overflow-tooltip="true"
						align="left">
						<template slot-scope="scope">
							{{ scope.row.materialDes }}
						</template>
					</el-table-column>
					<el-table-column label="物料编码" prop="materialCode" min-width="150" :show-overflow-tooltip="true"
						align="left">
						<template slot-scope="scope">
							{{ scope.row.materialCode }}
						</template>
					</el-table-column>
					<el-table-column label="生产订单号" prop="orderNo" width="150" align="left">
					</el-table-column>
					<el-table-column label="生产数量" prop="productionQty" width="100" align="left">
					</el-table-column>
					<el-table-column label="检验员" prop="employeeName" width="100" align="left">
					</el-table-column>
					<el-table-column label="工厂信息" prop="workshopId" width="150" :show-overflow-tooltip="true" align="left">
						<template slot-scope="scope">
							<template v-if="scope.row.workshopId">
								{{ scope.row.workshopId }}
							</template>
							<template v-if="scope.row.teamId">
								{{ scope.row.teamId }}
							</template>
							<template v-if="scope.row.workshopSectionId">
								{{ scope.row.workshopSectionId }}
							</template>
							<template v-if="scope.row.stationId">
								{{ scope.row.stationId }}
							</template>

						</template>
					</el-table-column>
					<el-table-column label="⼯序" prop="processIdList" width="150" :show-overflow-tooltip="true" align="left">
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="100">
						<template slot-scope="scope">
							<el-button type="text" @click="addOrUpdateHandle(scope.row.id)">详情</el-button>
							<el-button type="text" @click="exportFastReport(scope.row.id)">打印</el-button>
							<!-- <el-button type="text" @click="handleDel(scope.row.id)" class='SHZY-table-delBtn'>删除</el-button> -->
						</template>
					</el-table-column>
				</SHZY-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
					@pagination="initData" />
			</div>
		</div>
		<SHZY-Form v-if="formVisible" ref="SHZYForm" @refresh="refresh" />
	</div>
</template>
<script>
import { getIpqcInspectionlotList, getFastReport } from '@/api/q1/business/ipqcInspectionLot'
import SHZYForm from './Form'
export default {
	components: { SHZYForm },
	name: "business-ipqcInspectionLot",
	data() {
		return {
			showAll: false,
			query: {
				code: undefined,
				date: undefined,
				type: undefined,
				material: undefined,
				orderNo: undefined,
				employeeCode: undefined,
				status: undefined,
			},
			list: [],
			listLoading: true,
			elementLoadingText: "",
			multipleSelection: [],
			total: 0,
			listQuery: {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			},
			formVisible: false,
			btnLoading: false,
			ipqcInspectionTypeData: [],
			statusData: [
				{ 'fullName': "未检验", 'enCode': "0" },
				{ 'fullName': "检验中", 'enCode': "1" },
				{ 'fullName': "已检验", 'enCode': "2" },
				{ 'fullName': "已过帐", 'enCode': "3" },
				{ 'fullName': "已关闭", 'enCode': "4" }
			]
		}
	},
	computed: {
		menuId() {
			return this.$route.meta.modelId || ''
		}
	},
	created() {
		this.getDictionaryData()
		this.initData()
	},
	methods: {
		getDictionaryData() {
			this.$store.dispatch('base/getDictionaryData', { sort: 'ipqcInspectionType' }).then((res) => {
				this.ipqcInspectionTypeData = res
			})
		},
		getIpqcInspectTypeDes(enCode) {
			let ipqcInspectionTypeInfo = this.ipqcInspectionTypeData.find(x => x.enCode == enCode)
			if (ipqcInspectionTypeInfo) {
				return ipqcInspectionTypeInfo.fullName
			} else {
				return enCode
			}
		},
		initData() {
			this.listLoading = true;
			let _query = {
				...this.listQuery,
				...this.query,
				menuId: this.menuId,
			};
			let query = {}
			for (let key in _query) {
				if (Array.isArray(_query[key])) {
					query[key] = _query[key].join()
				} else {
					query[key] = _query[key]
				}
			}
			getIpqcInspectionlotList(query).then(res => {
				this.list = res.data.list
				console.log(this.list)
				this.total = res.data.pagination.total
				this.listLoading = false
			})
		},
		addOrUpdateHandle(id) {
			this.formVisible = true
			this.$nextTick(() => {
				this.$refs.SHZYForm.init(id, true)
			})
		},
		search() {
			this.listQuery = {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			}
			this.initData()
		},
		refresh(isrRefresh) {
			this.formVisible = false
			if (isrRefresh) this.reset()
		},
		reset() {
			for (let key in this.query) {
				this.query[key] = undefined
			}
			this.listQuery = {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			}
			this.initData()
		},
		exportFastReport(id) {
			this.elementLoadingText = "打印处理中";
			this.listLoading = true;
			getFastReport(id).then(res => {
				this.elementLoadingText = "";
				this.listLoading = false;
				console.log(res)
				const blob = new Blob([res], { type: 'application/pdf' })
				const url = window.URL.createObjectURL(blob)
				window.open(`${url}#filename=Zy`, "_blank")
			}).catch((res) => {
				this.elementLoadingText = "";
				this.listLoading = false;
			})
		}
	}
}
</script>